<template>
	<view>
		<view class="bg1 relative u-page">
			<image class="bgImg" :src="`${resources.myTopBg}`" mode=""></image>
			<view class="relative  scrollView" style="z-index: 10;">
				<uni-nav-bar :statusBar="true" :border="false" :background-color="'transparent'"
					title="我的"></uni-nav-bar>
				<view class="flex alg-center jst-between mL15">
					<view class="flex alg-center">

						<u-image :width="120" :borderRadius="20" :height="120" v-if="userInfo.headSculpturePath"
							class="myHeader" :src="xf.getImgUrl(userInfo.headSculpturePath)" mode=""></u-image>
						<image v-else class="myHeader" :src="resources.defaultHeader" mode=""></image>
						<view class="mL15">
							<view style="max-width: 400rpx;">
								<text class="font20 bold" >{{userInfo?.nickname||userInfo?.xflinggongOddUserInfoVo?.realName}}</text>
								<block v-if="authStatusInfo.isAuthPersonal==1">
									<text class="pL5"
										@click="xf.onlineUtils.route('/pages/userPage/subpackge/my/alreadySm/index')">已认证</text>
									<image class="w24" :src="resources.grrzLogo" mode=""></image>
								</block>
								<text v-else class="noRz"
									@click="xf.onlineUtils.route('/pages/userPage/subpackge/my/smrz/smrz')">去认证
									></text>
							</view>
							<view class="font15 u-8bd mT5">
								{{userInfo.phone}}
							</view>
						</view>
					</view>
					<view class="myZlBox flex alg-center"
						@click="xf.onlineUtils.route('pages/userPage/subpackge/my/myInfo/myInfo')">
						<image class="zlImg" :src="resources.editMyinfo" mode=""></image>
						<text class="font13">我的资料</text>
					</view>
				</view>
				<view class="">
					<view class="notice flex alg-center relative">
						<image class="laba mR10" :src="resources.laba" mode=""></image>
						<view style="width:calc(100% - 40rpx)">
							<u-notice-bar :type="'none'" :padding="'0rpx 0rpx'" :self="true" :list="noticeLis"
								:volume-icon="false" :mode="'vertical'"></u-notice-bar>
						</view>
					</view>
					<view class="flex  jst-between boxDj pT15" :class="isOdd?'sty1':''"
						:style="`background:url(${resources.odBg}) no-repeat`">
						<view class="font16 bold mL15">
							<text class="pR5">我的等级</text>
							<text class="pL5">{{userInfo.level}}</text>
						</view>
						<view @click="xf.onlineUtils.route('pages/common/myLevel/index')" class="u-8bd font13   mR15">
							查看更多 <u-icon name="arrow-right" color="#8d8d8d" size="24"></u-icon>
						</view>
					</view>

				</view>
				<view class="contentBox" :class="isOdd?'mar':''">
					<view class="gzBox">
						<view class="gzh" @click="skipGzh">
							关注公众号，及时接收平台消息
						</view>
						<view class="walletInfo  flex alg-center jst-center">
							<!-- <view class="w33" @click="tipOpt">
								<view class="font20 t-center">0.00</view>
								<view class="t-center font13 u-6">我的钱包</view>
							</view> -->
							<view class="w50" @click="xf.onlineUtils.route('pages/common/myGrade/index')">
								<view class="font20 t-center">
									{{userInfo?.branch}}
								</view>
								<view class="t-center font13 u-6">我的积分</view>
							</view>
							<view class="w50" @click="xf.onlineUtils.route('pages/userPage/subpackge/my/myInfo/myInfo')">
								<view class="t-center font20">{{userInfo.dataIntegrity||0}}</view>
								<view class="t-center font13 u-6">我的资料</view>
							</view>
						</view>
					</view>
					<block v-if="oddInfo">
						<view class="flex  jst-between myOddBg mT15 pT15"
							:style="`background:url(${resources.odBg}) no-repeat`">
							<view class="font16 bold mL15">
								<text class="pR5">我的灵工</text>

							</view>
							<view @click="xf.onlineUtils.route('/pages/userPage/subpackge/my/myJob/myJob')"
								class="u-8bd font13   mR15">查看更多 <u-icon name="arrow-right" color="#8d8d8d"
									size="24"></u-icon></view>
						</view>
						<view class="lvFlowBox">
							<view class="mT15 mB15 mL15 mR15">
								<view class="flex jst-between alg-center pT15">
									<text class="font18 bold txt-ellipsis w70">{{oddInfo?.oddJobName}}</text>
									<text class="font15 u-blue">{{oddInfo.orderTypeText}}</text>
								</view>
								<view class="font13 u-6 mT10">
									<image class="imgW24" :src="resources.time" mode=""></image>
									<text class="pL5">{{oddInfo.jobBeginTime}}-{{oddInfo.jobEndTime}}</text>
									<text class="mL10">{{oddInfo.jobBeginDatetime}}-{{oddInfo.jobEndDatetime}}</text>
								</view>
								<view class="mT10 flex">
									<block v-for="(item,i) in stepLis" :key="i">
										<view class="w33 circleFlowBox font13" v-if="item.value!=5">
											<block v-if="i<=oddInfo.orderType">
												<image class="circleFlow" :src="resources.selCircle" mode="">
												</image>
												<view class="t-center mT10">{{item.text}}</view>
											</block>
											<block v-else>
												<image class="circleFlow" :src="resources.noSelcircle" mode="">
												</image>
												<view class="t-center mT10 u-8bd">{{item.text}}</view>
											</block>
										</view>
									</block>

								</view>
								<view class="flex  mT12 jst-between alg-center"  v-if="oddInfo.orderType==1">
									<view class="flex alg-center" v-if="timeData.hour>=0">
										<text class="u-blue font15">距离开工：</text>
										<view class="flex alg-center font15 u-blue">
											<view class="timeBox">
												{{timeData.hour>=10?timeData.hour:'0'+timeData.hour}}
											</view>
											<text class="pL5 pR5">:</text>
											<view class="timeBox">
												{{timeData.min>10?timeData.min:'0'+timeData.min}}
											</view>
											<text class="pL5 pR5">:</text>
											<view class="timeBox">
												{{timeData.second>10?timeData.second:'0'+timeData.second}}
											</view>
										</view>
									</view>
									<view v-else class="u-blue font14">
										开工时间已到,请您及时到场工作
									</view>
									
									<view class="pointer bmBtn"
										@click.stop="xf.onlineUtils.route(`/pages/common/startWorkCode/index?orderId=${oddInfo.id}&regisId=${oddInfo.regisid}`)">
										立即开工</view>
								</view>
								<view v-else-if="oddInfo.orderType==2" class="flex jst-end mT12">
									<view class="flex alg-center">
										<view class="pointer bmBtn mR10"
											@click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${oddInfo.xfOddjobInfoId}&orderId=${oddInfo.id}&type=1`)">
											上传凭证</view>
										<view class="pointer bmBtn"
											@click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${oddInfo.xfOddjobInfoId}&orderId=${oddInfo.id}&regisId=${oddInfo.regisid}&type=2`)">
											已完工</view>
									</view>
								</view>
								<view v-else-if="oddInfo.orderType==4&&oddInfo.izEvaluate!=1" class="flex jst-end mT12">
									<view class="bmBtn line28  u-f bg-blue pL15 pR15"
										@click="xf.onlineUtils.route(`pages/common/commentForm/index?id=${oddInfo.xfOddjobInfoId}&orderId=${oddInfo.id}`)">
										去评价
									</view>
								</view>
							</view>

						</view>

					</block>
					<block v-else>
						<view class="flex  jst-between myOddBg mT15  alg-center">
							<view class="font16  mL15">
								<view class="bold">我的灵工</view>
								<view class="font13 u-8bd mT5">您还没有灵工</view>
							</view>
							<view class="pointer bmBtn font15 mR15" @click="jumpJob">去找灵工</view>
						</view>
					</block>
					<!-- <view class="flex jst-center pT15">
						<image style="width: 702rpx;height: 170rpx;" :src="resources.fbImg" mode="">
						</image>
					</view> -->
					<swiper v-if="imgList && imgList.length" :indicator-dots="true" :autoplay="true" :vertical="false" circular :interval="2000" class="u-swiper">
						<swiper-item v-for="(item, index) in imgList" :key="index" class="u-swiper-item">
							<u-image width="100%" height="100%" :src="define.imgUrl + item.coverPicPath" mode=""></u-image>
						</swiper-item>
					</swiper>
					<view class="font18 mT15 mB15 mL12 bold">常用功能</view>
					<view class="useOptBox">
						<view class="flex flex-wrap pT15 pB15">
							<view @click="jumpUrl(item.url)" class="flex jst-center flex-v w25 mB10"
								v-for="(item,i) in navLis" :key="i">
								<image class="navImg" :src="item.icon" mode=""></image>
								<text class="t-center font13 mT10 u-6">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
		<xfUserTabbar></xfUserTabbar>
		<u-modal v-model="showCode" :show-confirm-button="false" :show-title="false" :maskCloseAble="true">
			<view class="pL15 pR15 pT15 pB15">
				<view class="t-center bold">长按识别二维码关注公众号</view>
				<view class="flex jst-center mT15 mB15" v-if="showCode">
					<image :width="200" mode="aspectFit"  :height="200" show-menu-by-longpress  :src="gzhUrl"></image>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getUserInfo,
		myHomeOdd,
		getNoticeLis,
	} from "@/api/userInterface/user.js"
	import { getAdvertisement } from '@/api/companyInterface/user.js'
	import { changeRole, getConfigApprove, usergetOpenId, bindWx } from "@/api/common.js"
	import define from "@/utils/define.js"
	export default {
		data() {
			return {
				currentStep: 0,
				showCode:false,
				isOdd: true,
				stepLis: [],
				gzhUrl: '',
				navLis: [{
						name: '我的报名',
						url: 'pages/userPage/subpackge/my/myBmJob/index',
						icon: this.resources.my.icon1
					},
					{
						name: '推荐灵工',
						url: 'pages/userPage/subpackge/my/myRecommed/myRecommed',
						icon: this.resources.my.icon2
					},
					{
						name: '收藏',
						url: 'pages/userPage/subpackge/my/myFavor/myFavor',
						icon: this.resources.my.icon3
					},
					{
						name: '我的合同',
						url: '',
						icon: this.resources.my.icon4
					},
					{
						name: '保险',
						url: '',
						icon: this.resources.my.icon5
					},
					{
						name: '消息',
						url: '',
						icon: this.resources.my.icon6
					},
					{
						name: '切换成发布人',
						url: 'changeJob',
						icon: this.resources.my.icon7
					},
					{
						name: '成为经纪人',
						url: '',
						icon: this.resources.my.icon8
					},
					{
						name: '谨防诈骗',
						url: '',
						icon: this.resources.my.icon9
					},
					{
						name: '我的评价',
						url: 'pages/common/myComment/index',
						icon: this.resources.my.icon10
					},
					{
						name: '我的申诉',
						url: 'pages/common/mySs/index',
						icon: this.resources.my.icon11
					},
					{
						name: '我的经纪人',
						url: '/pages/common/myBroker/index',
						icon: this.resources.my.icon13
					},
					{
						name: '设置',
						url: '/pages/common/mySet/index',
						icon: this.resources.my.icon12
					},
				],
				noticeLis: [],

				timestamp: 0,
				timeData: {
					hours: 0,
					minutes: 0,
					seconds: 0
				},
				authStatusInfo:{},
				userInfo: {},
				oddInfo: null,
				timer:null,
				imgList: []
			}
		},
		async onShow() {
			this.userInfo={};
			this.oddInfo=null;
			this.isOdd=false;
			this.getUserInfoOpt();
			await this.getJobStatus()
			this.getOdd()
			this.getGzhInfo()
		},
		onUnload() {
			clearTimeout(this.timer); 
			clearInterval(this.timer);
			this.timer=null;
		},
		onHide() {
			clearTimeout(this.timer);  
			clearInterval(this.timer);
			this.timer=null;
		},
		methods: {
			getWechatLogin() { //// 获取微信unionid openId方法
				uni.login({
					provider: 'weixin', // 指定授权方式为微信
					success: (res) => {
						usergetOpenId({
							type: '3', // 获取类型 网站登录订阅 1 推送订阅2 小程序3
							code: res.code
						}).then(async res => {
							bindWx({
								openId: res.result
							}).then(res=>{
							})
						});
						},
						fail: (err) => {

						}
				});
			},
			skipGzh() {
				this.showCode=true;
				this.getWechatLogin()
			},
			getGzhInfo(){
				getConfigApprove('jjp_oddjob_service').then(res=>{
					this.gzhUrl=this.define.imgUrl+res.result;
				})
			},
			getImgList() {
				this.baseStore.getDictionaryDataAll('tjjjp_oddjob_wx_common').then(res => {
					if(res) {
						const value = res[0].value
						getAdvertisement({articleTypeId: value}).then(res=>{
							if(res){
								this.imgList = res.result
							}
						})
					}
				})
			},
			tipOpt() {
				
				 this.xf.onlineUtils.route('pages/common/myWallet/index')
			},
			jumpJob(e) {
				uni.switchTab({
					url: "/pages/userPage/job/index"
				})
			},
			getJobStatus() {
				this.baseStore.getDictionaryDataAll('jjp_oddjob_order_type').then(res => {
					this.stepLis = res.sort((a, b) => a.value - b.value)

				})
				getNoticeLis().then(res => {

					if (res.result && res.result.length > 0) {
						this.noticeLis = res.result.map(v => {
							return {
								title: v.title + ' ' + v.content,
								time: v.timeDiffStr
							}
						})
					}

				})
			},
			getUserInfoOpt() {
				getUserInfo().then(res => {
					this.userInfo = res.result;
					let info = res.result?.xflinggongOddUserInfoVo;
					this.authStatusInfo=info;
					this.userStore.setAuthStatus(info.authStatus)
					this.userStore.setUserInfo(JSON.stringify(info))
				})
			},
			getOdd() {
				myHomeOdd().then(res => {
					let that=this;
					this.oddInfo = res.result;
					if (this.oddInfo) {
						if(this.oddInfo.orderType==1){
							that.timer=setInterval(()=>{
								let d=this.oddInfo.jobBeginTime+' '+this.oddInfo.jobBeginDatetime+':00';
								that.timeData=that.xf.timeCal(d,1)
							},1000)
						}
						
						// this.timestamp = (new Date(res.result.jobBeginTime)).getTime();
					}


				})
			},
			onChange(e) {
				this.timeData = e;
			},
			jumpUrl(url) {
				if (url == 'changeJob') {
					let userInfo = this.xf.onlineUtils.getUserInfo()
					uni.navigateToMiniProgram({
					  appId: 'wxd75ddb642c290a5e',
					  path: 'pages/login/login',
					  success(res) {
					    console.log('打开成功');
					  }
					});
					// changeRole({
					// 	authenticationType: 1
					// }).then(res => {
					// 	uni.switchTab({
					// 		url: "/pages/companyPage/my/index"
					// 	})
					// })


				} else {
					this.xf.onlineUtils.route(url)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	}
</style>
<style scoped lang="scss">
	.useOptBox {
		width: 702rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.navImg {
			width: 48rpx;
			height: 48rpx;
			display: block;
			margin: 10rpx auto 0 auto;
		}

	}
	.u-swiper {
		height: 176rpx;
		margin-top: 10rpx;
		padding: 0 20rpx;
	}
	.timeT{
		padding: 4rpx 10rpx;
		background-color: #F8F8F8;
	}
	.time-img{
		width: 20rpx;
		height: 20rpx;
	}
	.lvFlowBox {
		width: 702rpx;
		// height: 360rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		margin-top: -65rpx;
		padding-bottom: 20rpx;
		background: linear-gradient(#fff, #F8FAFF);

		.timeBox {
			width: 52rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: #ECF2FE;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}

		.circleFlowBox {
			position: relative;

			&:after {
				position: absolute;
				content: "";
				height: 2rpx;
				width: calc(100% - 14rpx);
				left: calc(50% + 14rpx);
				top: 14rpx;
				background-color: #F6F6F6;
			}

			&:last-child {
				&:after {
					width: 0;
				}
			}
		}

		.circleFlow {
			width: 28rpx;
			display: block;
			height: 28rpx;
			margin: 0 auto;

		}
	}

	.gzBox{
		position: relative;
		height: 210rpx;
		margin: 0 auto;
		width: 702rpx;
	}
	.gzh{
		height: 100rpx;
		width: 702rpx;
		background: linear-gradient(-12deg, #ECF2FE, #E2F0FF, #ECF2FE);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;
		padding: 20rpx 0 0 0;
		font-size: 26rpx;
		color: #666666;
	}

	.walletInfo {
		position: absolute;
		bottom: 5rpx;
		width: 702rpx;
		height: 140rpx;
		background: linear-gradient(#fff, #F8FAFF);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.bgImg {
		position: absolute;
		width: 100%;
		height: 600rpx;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.noRz {
		color: #FF1414;
		border: 2rpx solid #FF1414;
		height: 34rpx;
		line-height: 34rpx;
		border-radius: 18rpx;
		padding: 0 10rpx;
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.myHeader {
		width: 120rpx;
		height: 120rpx;
		border-bottom: 20rpx;
	}

	.boxDj {
		width: 702rpx;
		height: 160rpx;

		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-size: 100% !important;
		width: 702rpx;
		height: 130rpx;
		margin: 30rpx auto 0 auto;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.myOddBg {
		background: radial-gradient(#F8FAFF, #E5EBFF);
		background-size: 100% !important;
		width: 702rpx;
		height: 130rpx;
		margin: 30rpx auto 0 auto;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.notice {
		width: 702rpx;
		margin: 0 auto;
		height: 64rpx;
		line-height: 64rpx;
		margin-top: 24rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.laba {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.myZlBox {
		width: 162rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #F3FAFE;
		border-radius: 27rpx 0rpx 0rpx 27rpx;

		.zlImg {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
			margin-left: 10rpx;
		}
	}

	.contentBox {
		width: 750rpx;
		// height: 1091rpx;
		padding-top: 30rpx;
		margin-top: -40rpx;
		padding-bottom: 60rpx;

		&.mar {
			.lvFlowBox {
				margin-top: -60rpx;
			}
		}

		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	}
</style>